20170620-Storage

Web存储机制

Web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无需持续地将数据发回服务器。Web Storage的两个主要目标是：

• 提供一种在cookie之外存储会话数据的途径

• 提供一种存储大量可以跨会话存在的数据的机制

sessionStorage对象

sessionStorage 是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。---> 当页面重新载入或者被恢复时（关闭页面又从历史记录中打开该页面），页面会话也是一直存在的。每当新标签或者新窗口中打开一个新页面，都会初始化一个新的会话（每个页面都有自己的sessionStorage）。

• 存储数据

sessionStorage.setItem("name","value");
sessionStorage.name = "value";

• 读取数据

sessionStorage.getItem("name")
var name = sessionStorage.name

• 遍历

for(var i=0, len = sessionStorage.length; i<len; i++){
    var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
}

for (var key in sessionStorage){
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
}

• 删除数据

delete sessionStorage.name
sessionStorage.removeItem("book")

• 清空全部数据

sessionStorage.clear()

localStorage

要访问一个localStorage对象，页面必须来自同一个域名(子域名无效)，使用同一种协议，在同一个端口。localStorage中存储的数据具有持久性，除非手动调用相关方法或者用户手动清理.

• 存储数据

localStorage.setItem("name","value");
localStorage.name = "value";

• 读取数据

localStorage.getItem("name")
var name = localStorage.name

• 遍历

for(var i=0, len = localStorage.length; i<len; i++){
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
    alert(key + "=" + value);
}

for (var key in localStorage){
    var value = localStorage.getItem(key);
    alert(key + "=" + value);
}

• 删除数据

delete localStorage.name
localStorage.removeItem("book")

• 清空全部数据

localStorage.clear()

限制

localStorage和sessionStorage的容量大小大约为5MB